<template>
  <div class="app-container">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <span>第三方平台集成</span>
      </div>

      <el-tabs v-model="activePlatform">
        <el-tab-pane label="钉钉集成" name="dingtalk">
          <el-form
            ref="dingtalkForm"
            :model="dingtalkConfig"
            label-width="120px"
          >
            <el-form-item label="启用集成">
              <el-switch v-model="dingtalkConfig.enabled"></el-switch>
            </el-form-item>
            <el-form-item label="App Key">
              <el-input
                v-model="dingtalkConfig.appKey"
                placeholder="请输入钉钉App Key"
              ></el-input>
            </el-form-item>
            <el-form-item label="App Secret">
              <el-input
                v-model="dingtalkConfig.appSecret"
                type="password"
                placeholder="请输入钉钉App Secret"
              ></el-input>
            </el-form-item>
            <el-form-item label="AgentId">
              <el-input
                v-model="dingtalkConfig.agentId"
                placeholder="请输入钉钉AgentId"
              ></el-input>
            </el-form-item>
            <el-form-item label="回调URL">
              <el-input
                v-model="dingtalkConfig.callbackUrl"
                disabled
              ></el-input>
              <el-button type="text" @click="copyCallbackUrl('dingtalk')"
                >复制</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveConfig('dingtalk')"
                >保存配置</el-button
              >
              <el-button @click="testConnection('dingtalk')"
                >测试连接</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="飞书集成" name="feishu">
          <el-form ref="feishuForm" :model="feishuConfig" label-width="120px">
            <el-form-item label="启用集成">
              <el-switch v-model="feishuConfig.enabled"></el-switch>
            </el-form-item>
            <el-form-item label="App ID">
              <el-input
                v-model="feishuConfig.appId"
                placeholder="请输入飞书App ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="App Secret">
              <el-input
                v-model="feishuConfig.appSecret"
                type="password"
                placeholder="请输入飞书App Secret"
              ></el-input>
            </el-form-item>
            <el-form-item label="回调URL">
              <el-input v-model="feishuConfig.callbackUrl" disabled></el-input>
              <el-button type="text" @click="copyCallbackUrl('feishu')"
                >复制</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveConfig('feishu')"
                >保存配置</el-button
              >
              <el-button @click="testConnection('feishu')">测试连接</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Integration",
  data() {
    return {
      activePlatform: "dingtalk",
      dingtalkConfig: {
        enabled: false,
        appKey: "",
        appSecret: "",
        agentId: "",
        callbackUrl: window.location.origin + "/api/dingtalk/callback",
        notificationEnabled: true,
        notificationTypes: ["系统通知", "邮件", "应用内消息"],
      },
      feishuConfig: {
        enabled: false,
        appId: "",
        appSecret: "",
        callbackUrl: window.location.origin + "/api/feishu/callback",
        notificationEnabled: true,
        notificationTypes: ["系统通知", "邮件", "应用内消息"],
      },
      loading: false,
    };
  },
  created() {
    this.fetchConfigs();
  },
  methods: {
    fetchConfigs() {
      this.loading = true;
      Promise.all([
        import("@/api/integration").then((module) =>
          module.getDingtalkConfig()
        ),
        import("@/api/integration").then((module) => module.getFeishuConfig()),
      ])
        .then(([dingtalkRes, feishuRes]) => {
          this.dingtalkConfig = dingtalkRes.data;
          this.feishuConfig = feishuRes.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    saveConfig(platform) {
      this.loading = true;
      const config =
        platform === "dingtalk" ? this.dingtalkConfig : this.feishuConfig;
      const apiMethod =
        platform === "dingtalk"
          ? import("@/api/integration").then((module) =>
              module.saveDingtalkConfig(config)
            )
          : import("@/api/integration").then((module) =>
              module.saveFeishuConfig(config)
            );

      apiMethod
        .then((res) => {
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(
            `${platform === "dingtalk" ? "钉钉" : "飞书"}配置保存失败`
          );
        })
        .finally(() => {
          this.loading = false;
        });
    },
    testConnection(platform) {
      this.$message.info(
        `正在测试${platform === "dingtalk" ? "钉钉" : "飞书"}连接...`
      );
      const apiMethod =
        platform === "dingtalk"
          ? import("@/api/integration").then((module) =>
              module.testDingtalkConnection()
            )
          : import("@/api/integration").then((module) =>
              module.testFeishuConnection()
            );

      apiMethod
        .then((res) => {
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(
            `${platform === "dingtalk" ? "钉钉" : "飞书"}连接测试失败`
          );
        });
    },
    copyCallbackUrl(platform) {
      const url =
        platform === "dingtalk"
          ? this.dingtalkConfig.callbackUrl
          : this.feishuConfig.callbackUrl;
      navigator.clipboard.writeText(url);
      this.$message.success("回调URL已复制到剪贴板");
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-form {
  max-width: 800px;
}
</style>